<template>
	<view class="homePage">
		<view class="container">
			<swiper :indicator-dots="true" :autoplay="true" indicator-color="#999999" indicator-active-color="#ffffff"
				class="swiper">
				<swiper-item class="swiper-item">
					<image class="container-img"
						src="https://manage.yuansaas.com/formAtt/1544128176045883e531196586624873_1631150793955.jpg"
						mode="aspectFill"></image>
					<view class="swiper-item-text">标题1</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<image class="container-img"
						src="https://manage.yuansaas.com/formAtt/416256632525824a2d8e91445994ec38_1630022922411.jpg"
						mode="aspectFill"></image>
					<view class="swiper-item-text">标题2</view>
				</swiper-item>
				<swiper-item class="swiper-item">
					<image class="container-img"
						src="https://manage.yuansaas.com/formAtt/416243765976224e9ba7550dd484454b_1630022909545.jpg"
						mode="aspectFill"></image>
					<view class="swiper-item-text">标题3</view>
				</swiper-item>
			</swiper>
			<view class="section_1">
				<image class="img_1" src="/static/icon_home_01.png" mode="aspectFill"></image>
				<swiper :circular="true" :vertical="true" class="text" :autoplay="true">
					<swiper-item class="text_1">
						<navigator url="" hover-class="none">
							<view class="text_2 text-ellipsis">2021，瀚天这座城，与你共成长</view>
						</navigator>
					</swiper-item>
					<swiper-item class="text_1">
						<navigator url="" hover-class="none">
							<view class="text_2 text-ellipsis">活动报名 | 还有6天！瀚天HAO声音报名倒计时！丰厚奖金等你拿</view>
						</navigator>
					</swiper-item>
				</swiper>
				<!-- <view class="text">这是园区公告滚动内容</view> -->
				<image class="img_2" src="/static/icon_home_02.png" mode="aspectFill"></image>
			</view>
			<view class="section_2">
				<view class="title-box">
					<image class="hot" src="/static/icon_hot_01.png" mode="aspectFill"></image>
					<view class="title">热门房源</view>
				</view>
				<view class="list">
					<view class="list-item">
						<HouseItem></HouseItem>
					</view>
				</view>
				<navigator open-type="switchTab" url="" hover-class="none">
					<view class="more-btn">查看更多房源</view>
				</navigator>
			</view>
			<view class="section_3">
				<navigator url="" hover-class="none">
					<view class="title-box">
						<view class="title">
							<image class="fly" src="/static/icon_home_03.png" mode="aspectFill"></image>
							<view class="text">园区动态</view>
						</view>
						<image class="arrow-right" src="/static/icon_arrowRight_01.png" mode="aspectFill"></image>
					</view>
				</navigator>
				<view class="list">
					<navigator url="" hover-class="none">
						<view class="list-item text-ellipsis ">瀚天科技城员工餐厅4月底“上新”！从简餐到佛跳墙，菜品应有尽有！</view>
					</navigator>
					<navigator url="" hover-class="none">
						<view class="list-item text-ellipsis ">瀚天品牌官活动丨企业传播如何爆款出圈？这场纷享会讲清楚了！</view>
					</navigator>
					<navigator url="" hover-class="none">
						<view class="list-item text-ellipsis ">无接触按电梯！瀚天科技城这家公司的“黑科技”火了！</view>
					</navigator>
				</view>

			</view>

			<button class='server-btn' open-type="contact" bindcontact="handleContact"><u-icon name="server-fill" color="#fff" size="32" ></u-icon></button>


		</view>
	</view>

</template>

<script>
	import HouseItem from '@/components/HouseItem.vue'
	export default {
		components: {
			HouseItem
		},
		data() {
			return {

			}
		},
		methods: {
			handleContact(e) {
				console.log(e.detail.path)
			 console.log(e.detail.query)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.homePage {
		background-color: #F7F7F8;
	}

	.homePage .container {
		padding: 32rpx;
	}

	.homePage .container .swiper {
		margin-bottom: 28rpx;

	}

	.homePage .container .swiper .swiper-item {
		position: relative;
		width: 686rpx;
		height: 324rpx;
		background: #ffffff;
		border-radius: 16rpx;
		/* margin-bottom: 28rpx; */
	}

	.homePage .container .swiper .container-img {
		width: 680rpx;
		margin: 0 auto;
		height: 100%;
		background-color: #eee;
		border-radius: 16rpx;
		/* margin-bottom: 28rpx; */
	}

	.homePage .container .swiper .swiper-item .swiper-item-text {
		padding: 6rpx 12rpx;
		position: absolute;
		bottom: 12rpx;
		right: 12rpx;
		color: #fff;
		background-color: rgba(0, 0, 0, 0.3);
		font-size: 24rpx;
		border-radius: 6rpx;
	}

	.homePage .container .section_1 {
		width: 686rpx;
		height: 80rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 16rpx;
		position: relative;
		margin-bottom: 44rpx;
	}

	.homePage .container .section_1 .img_1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 116rpx;
		height: 80rpx;
	}

	.homePage .container .section_1 .text {
		position: absolute;
		width: 500rpx;
		/* background-color: rebeccapurple; */
		top: 50%;
		left: 116rpx;
		transform: translate(0, -50%);
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333444;
		height: 80rpx;
	}

	.homePage .container .section_1 .text .text_1 {
		width: 100%;
		height: 100%;
		/* background-color: red; */
		display: flex;
		align-items: center;
	}

	.homePage .container .section_1 .text .text_1 .text_2 {
		max-width: 500rpx;
	}

	.homePage .container .section_1 .img_2 {
		position: absolute;
		bottom: 0;
		right: 0;
		width: 68rpx;
		height: 44rpx;
	}

	.homePage .container .section_2 {
		width: 686rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 40rpx;
		margin-bottom: 28rpx;
	}

	.homePage .container .section_2 .title-box {
		width: 686rpx;
		height: 110rpx;
		background: linear-gradient(360deg, #FFFFFF 0%, #FFF6F7 100%);
		border-radius: 16rpx;
		display: flex;
		padding: 0 28rpx;
		align-items: center;
	}

	.homePage .container .section_2 .title-box .hot {
		width: 42rpx;
		height: 42rpx;
		margin-right: 12rpx;
		background-color: #999999;
		border-radius: 50%;
	}

	.homePage .container .section_2 .title-box .title {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #553535;
	}

	.homePage .container .section_2 .list {
		width: 100%;
		padding: 0 28rpx;
		margin-bottom: 40rpx;
	}

	.homePage .container .section_2 .list .list-item {
		width: 100%;
		margin-bottom: 40rpx;
	}

	.homePage .container .section_2 .more-btn {
		width: 630rpx;
		height: 96rpx;
		background: #F7F7F8;
		border-radius: 10rpx;
		margin: 0 auto;
		text-align: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 96rpx;
		color: #888999;
	}

	.homePage .container .section_3 {
		width: 686rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		padding-bottom: 28rpx;
	}

	.homePage .container .section_3 .title-box {
		width: 100%;
		height: 110rpx;
		background: linear-gradient(180deg, #E9FFF8 0%, #FFFFFF 100%);
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 28rpx;
	}

	.homePage .container .section_3 .title-box .title {
		display: flex;
		align-items: center;
	}

	.homePage .container .section_3 .title-box .title .fly {
		width: 42rpx;
		height: 42rpx;
		background-color: #999999;
		border-radius: 50%;
		margin-right: 12rpx;
	}

	.homePage .container .section_3 .title-box .title .text {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333444;
	}

	.homePage .container .section_3 .title-box .arrow-right {
		width: 32rpx;
		height: 32rpx;
	}

	.homePage .container .section_3 .list {
		width: 100%;
		padding: 0 28rpx;
	}

	.homePage .container .section_3 .list .list-item {
		max-width: 100%;
		margin-bottom: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333444;
	}
	.server-btn{
		position: fixed;
		right: 20upx;
		bottom: 100upx;
		display: flex;
		align-items: center;
		background-color: #aaa;
		justify-content: center;
		width: 80upx;
		height: 80upx;
		padding: 0;
		opacity: .8;
	}
</style>
